<script lang="ts">
export default {
    name: 'audioEdit'
};
</script>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import {
  updateVoice,
  addVoice,
  getVoiceList,
  deleteListVoice,
  getVoiceById,
} from '@/api/audio';
import { uploadFile } from '@/api/file';
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { clearFormData } from '@/utils/utils';

// 1数字内容
// 6设备
const actionShowList = [
    { name: '设备', value: 6 },
    // { name: '待机logo', value: 5 },
    { name: 'PPT', value: 3 },
    {name: '视频', value: 2},
   {name: '图片', value: 1},
]
let actionShowLists = ref<any>([]);
let actionSendLists = ref<any>([])
const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    formData: {
        required: true,
        type: Object,
        default: {}
    },
    deviceList: {
        required: true,
        type: Array,
        default: []
    },
    commandList: {
        required: true,
        type: Array,
        default: []
    },
    pptList: {
        required: true,
        type: Array,
        default: []
    },
    sourceList: {
        required: true,
        type: Array,
        default: []
    },
})

const { dialog, formData,deviceList,commandList,pptList,sourceList } = props
const emit = defineEmits(['resetQuery'])

const uploadIconRef = ref();
const dataFormRef = ref(ElForm);

const fileList = ref([])

const rules = reactive({
    voiceWord: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
    title: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
    sourceType: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
    actionSend: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],

});
//切换指令动作
function actiocSendChange(val: any) {
    switch (val) {
        case 6:
            uploadAction("serverIotDevice")  //设备
            break;
        case 3:
            uploadAction("serverPPT") //PPT
            break;
        case 2:
            uploadAction("serverVideo") //PPT
            break;
        case 1:
            uploadAction("serverImage") //PPT
            break;
        default:
            return false;
            break;
    }
}
 //更新对应指令动作
function uploadAction(val: any) {
    actionSendLists.value = []
    props.commandList.map((item: any) => {
        if (item.value.includes(val)) {
            actionSendLists.value.push(item)
        }
    })
}
let selectValue = 1
//切换设备数字内容
function handleActionChange(val: any) {
     selectValue = val
    // if (val === 6) {
    //     actionShowLists.value = props.deviceList
    // } else {
    //      //筛选对应type 的数字内容
    //     actionShowLists.value = []
    //     props.pptList.map((item: any) => {
    //         if (item.backDataByType != null && item.backDataByType.length > 0) {
    //             item.backDataByType.map((items: any) => {
                   
    //                 if (parseInt(items.type) == selectValue) {
    //                     console.log("外层资源===",items)
    //                     if (items.backData != null && items.backData.length > 0) {
    //                         items.backData.map((obj: any) => {
                            
    //                             obj.id = obj.innerId
    //                             obj.name = obj.title || ""
    //                             // let a = true
    //                            let a = true
    //                             actionShowLists.value.forEach(element => {
    //                                 if (element.title == obj.title) {
    //                                     a = false
    //                                 }
    //                             });
    //                             if (a) {
    //                                 actionShowLists.value.push(obj)
    //                             }
    //                             console.log("actionShowLists",actionShowLists.value)
    //                             // actionShowLists.value.includes(obj) || actionShowLists.value.push(obj)
    //                             // //actionShowLists.value.push(obj) 
    //                          })                              
    //                     }
    //                 }
    //             })
    //         }
    //     })
    //     console.log(actionShowLists.value)
       
    // }
    // actiocSendChange(val)  //筛选动作
    
}

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();
    }
    clearFormData(formData);
    formData.status = 1
}


// 上传图片文件
function uploadFileImg(file: any, key: any) {
    uploadIconRef.value.clearFiles();
    uploadFile({
        file: file.raw,
        contentType: 'image/png'
    }).then((res: any) => {
        formData[key] = `${baseImage}${res.data}`
        ElMessage.success('操作成功');
    })
}


function downloadFile() {
    window.open(formData.address, '_self')
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        console.log(valid)
        if (valid) {
            //指令动作
                 console.log(formData)
                 props.commandList.map((item: any) => {
                    if (item.value === formData.actionSend) {
                        // formData.actionSend = item.name
                        formData.actionShow = item.name
                    }
                })
                if (selectValue == 6) {
                    //设备
                    props.deviceList.map((item: any) => { 
                        if (item.name === formData.title) {
                            formData.contentId = item.id 
                        }
                    }) 
                } else {
                    //数字内容
                    actionShowLists.value.map((item: any) => {
                        if (item.title === formData.title) {
                            formData.contentId = item.id
                        }
                    })
                }
            if (formData.id) {
           
                updateVoice(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            } else {
                addVoice(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            }

        }
    });
}



watch(formData, (val: any) => {
    if (val.sourceType === 6) {
        actionShowLists.value = props.deviceList
    } else {
        //筛选数字内容
        actionShowLists.value = []
        props.pptList.map((item: any) => {
            if (item.backDataByType != null && item.backDataByType.length > 0) {
                item.backDataByType.map((items: any) => {
                    if (parseInt(items.type) == val.sourceType) {
                        if (items.backData != null && items.backData.length > 0) {
                            items.backData.map((obj: any) => {
                                obj.id = obj.innerId
                                obj.name = obj.title || ""
                                let a = true
                                actionShowLists.value.forEach(element => {
                                    if (element.title == obj.title) {
                                        a = false
                                    }
                                });
                                if (a) {
                                    actionShowLists.value.push(obj)
                                }
                                // actionShowLists.value.push(obj) 
                             })                              
                        }
                    }
                })
            }
        })
    }
    actiocSendChange(val.sourceType)  //筛选动作
})
onMounted(() => {

});
</script>

<template>
    <div>
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" @close="closeDialog">
            <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
                <el-form-item label="语音输入" prop="voiceWord">
                    <el-input v-model="formData.voiceWord" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="sourceType" label="指令对象">
                    <el-select v-model="formData.sourceType" placeholder="请选择" @change="handleActionChange" style="width: 166px!important;">
                        <el-option v-for="item in actionShowList"  :key="item.name" :label="item.name" :value="item.value" />
                    </el-select>
                    <el-form-item prop="title">
                        <el-select v-model="formData.title" placeholder="请选择" style="width: 520px!important;">
                            <el-option v-for="(item, index) in actionShowLists" :key="item.name" :label="item.name" :value="item.name" />
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item prop="actionSend" label="指令动作">
                    <el-select v-model="formData.actionSend" placeholder="请选择">
                        <el-option v-for="item in actionSendLists" :key="item.name" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>


            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.a-class {
    color: dodgerblue;
    margin-left: 10px;
}
.el-form-item .el-select {
    width: 100%;
  }
.upload-demo .upload-demo-img {
    width: 100px;
    height: 100px;
    display: block;
}

:deep(.el-upload-list) {
    display: none !important;
}
</style>

<style>
.upload-demo .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.upload-demo .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.upload-demo-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>